﻿<template>
      <!--send box s-->
      <div class="wrap_letter_send_box">
        <p class="certain_layer_input_title">输入收到的信件ID</p>
        <input type="text" class="input_letter_id" autofocus v-on:blur="input_blur($event)">
        <div class="wrap_user_img">
          <img v-bind:src="send_user_img" alt="">
        </div>
        <p class="bot_id">
          ID:{{letter_id}}
        </p>
        <div class="certain_btn" v-on:click="letter_certain">

        </div>
      </div>
</template>
<script>
import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
import "../../../static/css/Letter/Certain_layer.css";
  import "../../../static/css/Letter/Certain_layer_input.less"
  import qs from 'qs';
  import { Toast } from 'mint-ui';
export default {
  name: 'hello',
  data () {
    return {
      get_layer_show: this.$store.getters.get_layer_show,
      loading: true,
      letter_id: "",
      send_user_img:"",
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  mounted: function () {
    let id = location.search.split("user_id=")[1];
    sessionStorage.setItem("user_id", id)
    //let location = location.search
    //if(~location.indexOf("?")){
    //     //location.splite
    //}
  },
  methods: {
    ...mapMutations([
      "Change_certain_layer",
      "Change_lettter_user_img",
      "Change_user"
    ]),
    ...mapGetters([
      "get_user_letter"
    ]),
    //获取收信人信息
    input_blur: function (e) {
      this.$emit('show_load');
      let _this_value = e.target.value
      this.$http.post('/api/user/getUserByIdent',
        qs.stringify(
          {
            ident: _this_value,
          })
      )
        .catch((thrown) => {
        this.$emit('hide_load');
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          //记录id
          this.Change_user({
            id: sessionStorage.getItem("user_id"),
            insert: true
          });
         this.$emit('hide_load');
          if (e.data == undefined || e.data == "") {
            Toast({
              message: '没有此用户信息',
              position: 'bottom',
              duration: 2000
            });
            this.send_user_img = "";
            this.letter_id = "";
            return;
          }
          Toast({
            message: '获取信息成功',
            position: 'bottom',
            duration: 2000
          });
          let data = e.data;
          this.send_user_img = data.image;
          this.Change_lettter_user_img({img:data.image});//全局 image
          this.letter_id = e.data.ident;
        })
    },
    //页面跳转
    certain_jump: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    hid_layer:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    letter_certain: function () {
      this.$emit('show_load');
      this.$http.post('/api/user/sendInfo/Affirmation',
        qs.stringify(
          {
            myId: sessionStorage.getItem("user_id"),
            ident: this.letter_id,
        }
      
        ))
        .catch((thrown) => {
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          if (e.data == 1) {
            this.$store.dispatch("thom_redirect",
              {
                name: "/Index_main/Wrap_certain_layer/Certain_layer", router: this.$router
              });
          }
        })
    }
  }
  }
</script>
<style scoped>
  .wrap_user_img{
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    border: 2px solid #cc9966;
    margin: 0 auto;
    background-color: #ffffff;
    margin-bottom: 0.85rem;
    position: relative;
  }
  .wrap_user_img img{
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    display: block;
  }
  .wrap_letter_send_box{
    height:18rem;
  }
  .input_letter_id {
    margin-bottom: 1rem;
  }
  .wrap_user_img{
    width:5rem;
    height:5rem;
    margin-bottom:0.5rem;
  }
  .wrap_user_img img{
     width:4.5rem;
     height:4.5rem;
  }
  .letter_send_box p:nth-child(1){
    margin-top:1rem;
  }
  .layer_certain_btn_2 {
    margin: 0 auto 0.1rem;
  }
</style>


